<template>
	<view class="drop">
		<!-- 下拉菜单 -->
		<view class="search">
			<input type="text" value="" placeholder="请输入搜素内容"/>
		</view>
		<view class="dropDown-box" @click="toTab">
			<view class="dropDown" v-for="(item,i) in tab" :key="i"  :class="{'on':tabIndex == i}" 
			:data-i="i" :data-item="item">
				{{item.name || item }}
			</view>
			<!-- 内容 -->
			<view class="content" :class="isSelect ? 'active' : ''" @click="close()">
				{{content}}
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{height: listHeight}" id="scroll">
			<view class="list" v-for="(item,i) in 100" :key="i" >
				内容
			</view>
		</scroll-view>
		<!-- 背景 -->
		<view class="bg" id="bg" :class="isSelect ? 'bgActive' : ''" @touchmove.stop.prevent=""></view>	
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tab:[{name:'选项1',id:0},"选项2","选项3","选项4",],  //下拉框列表
				content:"",  // 下拉内容
				tabIndex:null,  // 下拉点到的某个索引
				ScreenHeight:0,   // 背景的高度
				listHeight:0, // 内容的高度
				isSelect:false,  //是否选中了每个栏目
			}
		},
		onReady() {
			let v = uni.getSystemInfoSync().windowHeight // 视口高度
			const query = uni.createSelectorQuery().in(this);
			query.select('#scroll').boundingClientRect(data => {
				this.listHeight = ( v - data.top) + 'px'
			}).exec();
		},
		methods:{
			// 切换栏目
			toTab(ev){//事件委托提升性能
				let dataset = ev.target.dataset
				console.log('dataset',dataset);
				let {item,i} = dataset
				this.content = item    //对应选项
				if(this.tabIndex != i){
					this.tabIndex = i
					this.isSelect = true
				}else{
					this.tabIndex = null
					this.isSelect = false
				}
				
			},
			// 关闭下拉框
			close(){
				this.$toast("你关闭了" + (this.tabIndex + 1) + "栏目")
				this.tabIndex = null
				this.isSelect = false
			}
		}
	}
</script>

<style>
	.search{
		position: relative;
		z-index: 99;
		background: #FFFFFF;
	}
	.search input{
		border: 1px solid #000000;
		border-radius: 10rpx;
		padding: 20rpx;
		
	}
	.list{
		display: flex;
	}
	.dropDown-box{
		position: relative;
		display: flex;
		width: 100%;
		justify-content: space-between;
		background: #CCCCCC;
		height: 70rpx;
		z-index: 99;
	}
	.dropDown{
		flex: 1;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: .1s all linear;
	}
	.content{
		position: absolute;
		top: 70rpx;
		height: 0;
		background: #007AFF;
		width: 100%;
		visibility: hidden;
		transition: .1s all linear;
	}
	.on{
		color: #007AFF;
	}
	.active{
		visibility: visible;
		height: 300px;
		overflow-y: auto;
	}
	.bgActive{
		visibility: visible !important;
		background: rgba(0,0,0,.4) !important;
	}
	.bg{
		position: absolute;
		top: 0;
		height: 100%;
		background: rgba(0,0,0,0);
		width: 100%;
		transition: .1s all linear;
		visibility: hidden;
	}
</style>
